规范站 设计规范站

图标设计规范

系统图标设计规范,以供设计师保持图标风格的统一与小尺寸的可读性和清晰度。

整体规范

图标网格

图标网格为图形元素的定位建立了一套清晰的规则, 图标设计在网格内完成,让图标设计形成一个灵活而连贯的系统,促进一致性。

正方形

圆形

Keyline形状

关键线形状是网格的基础。通过使用这些核心形状作为指导,您可以在相关的系统图标之间保持一致的视觉比例。

正方形

圆形

竖向矩形

横向矩形

内容区域

图标的内容应该保留在安全区域内。裁剪区域指的是图形文件的最终大小。如果需要额外的视觉重量,内容只应扩展到活动区域和修剪区域之间。 不要将图标的任何部分放置在修剪区域之外。

活动区域

修剪区域

DP单元网格

系统图标一般显示在24dp里。在设计图标时,保证100%的像素精度是非常重要的。缩放图标时,通过保持单位比率,可以保持锐利的边缘。 对于密集的布局,可以通过压缩度量来容纳密集的布局,图标可以缩减到20dp。

原比例100%

等比缩放400%

20dp / 原比例100%

20dp / 等比缩放400%

细节规范

笔画重量

图标笔画重量应保持一致,不要粗细不一。

正确

错误

透视

平面化的图标更易被观者阅读,所以绘制图标时应尽量避免倾斜,旋转,或具有透视、空间感的图标。

正确

错误

简化图标

简化的图标能提高图标的清晰度与可读性,所以绘制图标时不要过于直译,不要使用精致的、细的笔划,应尽量简化,避免复杂的图标。

正确

错误

整体性

绘制图标时应注意保持图标外形的一致性,外形不要过于松散。

正确

错误

间隙

需要在图标周围留有足够的空间来保证易读性和触摸。

正确

错误

可操作图标最小尺寸

可操作图标的最小尺寸,例如点赞、收藏、分享等图标

图标大小范围:38x38px

图标实际大小:32x32px

相关资源文件

最后更新时间:2017-07-14

找到{{searchWord}}的{{titleData.length}}个页面

未找到{{searchWord}}的相关结果